<div id='history' class='js-history'>

  <div class='pin-bottom row1 pad1y pad2x keyline-top'>
    <h3 class='block truncate'><%= obj.user.name||obj.user.id %></h3>
    <a class='micro pin-topright pad1 fill-dark strong' href='/unauthorize'>Logout</a>
  </div>

  <div class='col12 pin-left top1 bottom1 scroll-styled'>

  <div class='clearfix pad2y pad1x'>
    <a class='short js-newproject button col12 icon plus space-bottom1' href='/authorize'>New style or source</a>
    <a class='short js-browseproject button col12 icon folder'>Browse</a>
  </div>

  <div class='center pad1 keyline-top'>
    <div class='inline col12 rounded-toggle'><!--
    --><a class='js-tab strong col6 <%= obj.style  ? 'active' : '' %>' href='#history-style'>Styles</a><!--
    --><a class='js-tab strong col6 <%= obj.source ? 'active' : '' %>' href='#history-source'>Sources</a>
    </div>
  </div>

  <div id='history-style' class='pad1x clearfix col12 <% if (obj.style) { %>active<% } %>'>
      <%
      var styleitem = this.styleitem;
      _(obj.history.style).chain()
        .sortBy(function(item) { return item.id })
        .each(function(item) {
          print(styleitem({
            item: item,
            withdel: true,
            classes: (obj.style && obj.style.id === item.id) ? 'proj-active' : ''
          }));
        });
      %>
      <% if (obj.source) { %>
      <%= this.emptystate({message:'You don\'t have any saved styles yet. <a href="/new/style"> Create one now to see it appear in this list</a>.'}) %>
      <% } else { %>
      <%= this.emptystate({message:'You don\'t have any saved styles yet. <a href="#" class="js-saveas"> Save your currently active style</a> to see it appear in this list.'}) %>
      <% } %>
  </div>

  <div id='history-source' class='pad1x clearfix col12 <% if (obj.source) { %>active<% } %>'>
      <%
      var sourceitem = this.sourceitem;
      _(obj.history.source).chain()
        .filter(function(item) { return item.id.indexOf('tmsource://') === 0 })
        .sortBy(function(item) { return item.id })
        .each(function(item) {
          print(sourceitem({
            item: item,
            withdel: true,
            classes: (obj.source && obj.source.id === item.id) ? 'proj-active' : ''
          }));
        });
      %>
      <% if (obj.source) { %>
      <%= this.emptystate({message:'You don\'t have any saved local sources yet. <a href="#" class="js-saveas"> Save your currently active source.</a>'}) %>
      <% } else { %>
      <%= this.emptystate({message:'You don\'t have any saved local sources. <a href="/new/source"> Create a new one now.</a>'}) %>
      <% } %>
  </div>

</div>

</div>
